<template>
  <div class="wft-dynamic-comp-advanced-trellis">
    <div v-for="(curRow, rowIndex) in attrs.row" :key="rowIndex" class="row" :style="{ height: rowHeight }">
      <div v-for="(curCol, colIndex) in attrs.col" :key="colIndex" class="col" :style="{ width: colWidth, ...getCompStyle(getCurIndexComp(curRow, curCol)), ...trellisBorderStyle }">
        <component
          v-if="getCurIndexComp(curRow, curCol)"
          :is="`${getCurIndexComp(curRow, curCol)?.key}Temp`"
          :cur-comp="getCurIndexComp(curRow, curCol)"
          :panel-json="panelJson"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useAttrs } from 'generator/hooks'
import { compDefault, panelJsonDefault } from 'generator/index/Layout/ConfigPanel/widget/default'
import { computed } from 'vue';

const props = withDefaults(defineProps<{
  panelJson: TPanel,
  curComp?: TComp
}>(), {
  panelJson: () => panelJsonDefault,
  curComp: () => compDefault
})

const attrs = useAttrs(props.curComp.attrs)

const trellisBorderStyle = computed(() => {
  const s = <{[k: string]: any}>{}
  const { show, width, type, color } = attrs.value.border
  if(show) {
    s.border = `${width}px ${type} ${color}`
  }
  return s
})

const rowHeight = computed(() => {
  if(attrs.value.row < 1) {
    return '100%'
  }
  return (100 / attrs.value.row) + '%'
})

const colWidth = computed(() => {
  if(attrs.value.col < 1) {
    return '100%'
  }
  return (100 / attrs.value.col) + '%'
})

// 获取当前位置的控件数据
function getCurIndexComp(curRow: number, curCol: number) {
  return props.curComp.children?.find(item => item.style.coors!.row == curRow && item.style.coors!.col == curCol)
}

// 内部控件的样式 去掉边框以宫格边框为主
function getCompStyle(comp: TComp | undefined) {
  if(!comp) return {}
  const s = <{[k: string]: any}>{}
  const { background } = comp.style
  s.backgroundColor = background.color || 'transparent'
  s.backgroundImage = `url(${background.img})`
  s.backgroundSize = background.size
  s.backgroundRepeat = background.repeat
  s.backgroundPosition = background.position
  return s
}
</script>
<style scoped>
.wft-dynamic-comp-advanced-trellis {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.wft-dynamic-comp-advanced-trellis > .row {
  width: 100%;
  display: flex;
}

.wft-dynamic-comp-advanced-trellis > .row > .col {
  height: 100%;
  box-sizing: border-box;
}
</style>
